<template>
  <div class="app-container">

    <div class="filter-container">
      <el-date-picker
        v-model="listQuery.checktime"
        type="daterange"
        range-separator="至"
        class="filter-item"
        style="width:300px"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
      >
      </el-date-picker>

      <el-select v-model="listQuery.area" placeholder="请选择区域" class="filter-item w-200" clearable>
        <el-option
          v-for="item in baseData.leaderInfo"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button-group class="filter-item">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="search"
        >
          搜索
        </el-button>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-refresh"
          @click="refresh"
        >
          重置
        </el-button>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-paperclip"
          @click="saveExecs"
        >
          创建全局调用
        </el-button>
      </el-button-group>

    </div>
    <el-table
      v-loading="listLoading"
      :data="rankData"
      id="table"
      element-loading-text="Loading"
      border
      fit
      height="100%"
      stripe
      row-class-name="rowpadding"
      header-row-class-name="headerClass"
      class="table-container"
      highlight-current-row
      show-summary
      ref="customerReportDateTable"
    >

      <el-table-column>
        <template slot="header" slot-scope="scope">
          <div style="font-weight: bold;font-size:20px;padding:5px 0;text-align:center;">节点</div>
        </template>
        <el-table-column
          width="600"
          label="节点名"
          align="center"
        >
          <template slot-scope="scope">
            <div class="fontSize">{{ scope.row.title }}</div>
          </template>
        </el-table-column>

        <el-table-column
          width="200"
          label="2次更新"
          align="center"
          :formatter="formatDate"
        >
          <template slot-scope="scope">
            <div class="fontSize">{{ scope.row.uptime? scope.row.uptime : '-' }}</div>
          </template>
        </el-table-column>
      </el-table-column>


    </el-table>

  </div>
</template>
<style>
.fontSize {
  font-size: 14px;
}

.rowpadding {
  padding: 20px 0 !important;
}

.headerClass {
  background: #409EFF;
}
</style>
<script>
import exportExecl from '@/utils/excel'
import {getRankDom} from '@/api/rank'
import {getWzParams} from "@/api/wz";

let id = 0
export default {
  data() {
    return {
      total: 0,
      list: [],
      drawer: true,
      rankData: [],
      countTypeData: [],
      listLoading: false,
      listQuery: {
        checktime: [new Date(new Date().getFullYear(), new Date().getMonth(), 1).toLocaleDateString('fr-CA'), new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0, 23, 59, 59).toLocaleDateString('fr-CA')],
        area: ''
      },
      baseData: [],
      dialogVisible: false,
      dialogType: 'create',
      loading: false
    }
  },
  created() {
    this.WzParams()
    this.fetchData()
  },
  updated() {

    this.$nextTick(() => {
      this.$refs.customerReportDateTable.doLayout()
    })
  },
  methods: {
    saveExecs(){
       let s = new Date(this.listQuery.checktime[0]+' 00:00:00').getTime(),e = new Date(this.listQuery.checktime[1]+' 00:00:00').getTime()
       let s2= parseInt(parseInt(Math.floor(e / 1000))+86400)
       let randOm  = '[area]'+Math.floor(s / 1000)+'-'+s2+'[/area]'
      this.$alert('复制下方代码至月报编辑器<br /><strong>'+randOm+'</strong>', 'HTML 片段', {
        dangerouslyUseHTMLString: true
      });
    },
    search() {
      this.fetchData()
    },
    refresh() {
      this.listQuery = {
        checktime: '',
      }
      this.CountType()
    },
    WzParams() {
      let baseData = localStorage.getItem('wzbaseData')
      if (!baseData) {
        getWzParams().then(response => {
          this.baseData = response.data
          localStorage.setItem('wzbaseData', JSON.stringify(this.baseData))
        })
      } else {
        this.baseData = JSON.parse(baseData)
      }
    },
    fetchData() {
      if (!this.listQuery.checktime) {
        this.$message({
          message: '请完善筛选条件',
          type: 'error'
        })
        return false
      }
      this.listLoading = true
      getRankDom(this.listQuery).then(response => {
        this.listLoading = false
        this.rankData = response.data
      })
    }
  }
}
</script>
